<!DOCTYPE html>

<head>
	<meta name='viewport' content='width=device-width, initial-scale=1' charset="utf-8" />
	<title>公主连结公会战面板</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/index.js"></script>
	<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/theme-chalk/index.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="{{ url_for('yobot_static', filename='yocool/js/yocool.i.js') }}"></script>
	<link rel="stylesheet" href="{{ url_for('yobot_static', filename='yocool/css/style.css') }}">

	<style>
	html{
		background-color: #FFFFFF;
	}

	h1 {
		font-family: 'Lato', sans-serif;
		font-weight:300;
		letter-spacing: 2px;
		font-size:48px;
		color: #FFF;
	}
	
	h4{
		color: var(--font-color);
	}
	
	p {
		font-family: 'Lato', sans-serif;
		letter-spacing: 1px;
		font-size:14px;
		color: #333333;
	}
	
	.el-avatar--circle {
	    border-radius: 50%;
	    height: 80px;
	    width: 80px;
		margin-top: -10px;
	}
	
	.el-button {
		margin: 0.5rem;
	}
	</style>
</head>

<body>
	<div class="header">

		<div class="inner-header flex">
			<h1>会战管理面板</h1>
		</div>
		<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28"
		 preserveAspectRatio="none" shape-rendering="auto">
			<defs>
				<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
			</defs>
			<g class="parallax">
				<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
				<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
				<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
				<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
			</g>
		</svg>
	</div><br>
	<div id="app">
		<el-avatar :src="'https://q1.qlogo.cn/g?b=qq&nk=' + {{user.qqid}} + '&s=140'"></el-avatar>
		<h4>欢迎，{{ user.nickname }}</h4>
		{% if user.authority_group < 10 -%} <el-row>
			<a href="{{ url_for('yobot_setting') }}">
				<el-button type="primary">设置项</el-button>
			</a>
			<a href="{{ url_for('yobot_users_managing') }}">
				<el-button type="primary">用户管理</el-button>
			</a>
			<a href="{{ url_for('yobot_groups_managing') }}">
				<el-button type="primary">群管理</el-button>
			</a>
			</el-row>
			{%- endif %}
			<el-row>
				<a href="{{ url_for('yobot_user_info', qqid=user.qqid) }}">
					<el-button type="primary">个人中心</el-button>
				</a>
				{% if not clan_groups -%}
				<el-tooltip effect="dark" placement="bottom">
					<div slot="content">你还没有选择默认公会<br />请在你的公会群里发送“加入公会”来设置默认公会</div>
					<el-button type="primary" disabled>无公会</el-button>
				</el-tooltip>
				{%- else -%}
				{% for group in clan_groups -%}
				<a href="{{ url_for('yobot_clan', group_id=group['group_id']) }}">
					<el-button type="primary">公会：{{ group['group_name'] }}</el-button>
				</a>
				{% endfor -%}
				{%- endif %}
				<a href="{{ url_for('yobot_reset_pwd') }}">
					<el-button type="primary">修改密码</el-button>
				</a>
			</el-row>
			<el-row>
				<a href="{{ url_for('yobot_logout') }}">
					<el-button type="danger">退出登陆</el-button>
				</a>
			</el-row>
	</div>
</body>
<script>
	if (!Object.defineProperty) {
		alert('浏览器版本过低');
	}
	new Vue({
		el: '#app',
		data: {
			addr: [],
		},
		mounted() {
			var thisvue = this;
			axios.get('{{ url_for("yobot_api_iplocation", ip=session["last_login_ipaddr"]) }}').then(function(res) {
				thisvue.addr = res.data;
			}).catch(function(error) {
				console.log(error);
				thisvue.addr = ['未知'];
			});
		},
		methods: {
			from_ts: function(ts) {
				if (ts == 0) {
					return '-';
				}
				var nd = new Date();
				nd.setTime(ts * 1000);
				return nd.toLocaleString('chinese', {
					hour12: false
				});
			},
		},
		delimiters: ['[[', ']]'],
	})
</script>

</html>
